<template>
  <div>
    <el-main>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
        "
        border
        style="width: 100%"
        :header-cell-style="{ background: '#409EFF', color: '#ffffff' }"
        @row-click="getUserDetail"
      >
        <el-table-column fixed="left" prop="id" label="工号" width="50">
        </el-table-column>
        <el-table-column fixed="left" prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="65">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.sex === '男' ? 'success' : 'danger'"
              disable-transitions
              >{{ scope.row.sex }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="department" label="主部门" width="120">
        </el-table-column>

        <!-- <el-table-column prop="email" label="邮箱" width="200">
        </el-table-column> -->

        <el-table-column prop="post" label="职位" width="160"></el-table-column>

        <el-table-column prop="mobile" label="电话" width="150">
        </el-table-column>

  
        <el-table-column prop="idcardnum" label="身份证号" width="200"></el-table-column>

        <el-table-column prop="workplace" label="工作地点"  width="100"></el-table-column>
        <el-table-column prop="address" label="通讯地址"></el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <el-pagination
        v-if="tableData && tableData.length > 0"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[7, 10, 20, 50, 100]"
        :page-size="PageSize"
        :total="totalCount"
        layout="total,sizes, prev, pager, next"
      >
      </el-pagination>
    </el-footer>
  </div>
</template>

<script>
export default {
  props: ["tableData", "totalCount", "currentPage", "PageSize"],

  methods: {
    getUserDetail(row) {
      this.$bus.$emit("getUserDetail", row);
    },

    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },

    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>